<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./browser-qrcode.js"></script>
</head>

<body>
    <button id="$fetch">native</button>
    <img id="$native" src="" alt="" srcset="">
</body>
<script>
    window.onload = () => {
        console.warn('window.QRCode', window.QRCode);
    }
    $fetch.onclick = () => {
        let url = 'http://localhost:3030/api/payment/wechatpay_native'
        fetch(url, {
            method: 'POST',  //GET, POST
            body: JSON.stringify({
                a: 1,
                b: 2
            }),
            headers: new Headers({
                'Content-Type': 'application/json',
                'Accept-Charset': 'utf-8'
            })
        }).then((response) => {
            console.warn('response', response);
            // 将响应转换为JSON格式
            return response.json();

        }).then((data) => {
            console.log('Response content:', data);
            var opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                quality: 0.3,
                margin: 1,
                color: {
                    dark: "#000000",  //#010599FF
                    light: "#ffffff"  //#FFBF60FF
                }
            }

            QRCode.toDataURL(data.code_url, opts, function (err, url) {
                if (err) throw err
                console.warn('url', url);
                $native.src = url
            })
        }).catch((error) => {
            console.warn('error', error);
        })
    }

</script>
<!-- 
     .then((response) => {
    // 将响应转换为JSON格式
    return response.json();
  })
  .then((data) => {
    // 在控制台打印响应内容
    console.log('Response content:', data);
  })
  .catch((error) => {
    // 处理错误情况
    console.error('Error:', error);
  });
 -->

</html>